<!-- 
  @description: 分类卡片列表（用于切换不同类型待办）
-->
<template>
  <div class="todo-aside border-box">
    <TodoTabs
      class="TodoTabs"
      v-for="(item, index) of todoTabList"
      :key="index"
      :TodoTabItem="item"
      :activeName="active"
      @tabClick="changeTodoTabs"
    ></TodoTabs>
  </div>
</template>

<script setup lang="ts">
import { computed, getCurrentInstance, onMounted, reactive, ref } from 'vue'
import TodoTabs from './TodoTabs.vue'
import { TodoTab, Todo } from '../../types/TodoType'

const { proxy }: any = getCurrentInstance()
const emit = defineEmits(['tabsChange'])
const props = defineProps({
  // 默认选中tab名称
  activeName: {
    type: String,
    default: 'All',
  },
})
defineExpose({
  getTodoTabs,
  changeTodoTabs,
})

let todoTabList: Array<TodoTab> = reactive([])
let active = ref(props.activeName)

onMounted(() => {
  getTodoTabs()
  // 获取数据后，切换tab到选中的项
  changeTodoTabs(active.value)
})

async function getTodoTabs() {
  const { data: res } = await proxy.$http.get('/category/listAndNumber')

  if (res.isSuccess) {
    todoTabList.length = 0
    res.data.forEach((item: any) => {
      todoTabList.push(item)
    })
    changeTodoTabs(active.value)
  }
}

function changeTodoTabs(value: string) {
  todoTabList.forEach((v) => {
    if (v.title === value) {
      v.isActive = !v.isActive
      active.value = value
    } else {
      v.isActive = false
    }
  })
  emit('tabsChange', active.value)
}
</script>

<style lang="less" scoped>
.todo-aside {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-end;

  .TodoTabs {
    margin: 10px 0;

    &:first-child {
      margin: 0 0 10px 0;
    }
  }
}
</style>
